<template>
	<view>
		<view class="head">
			<view>
				<image src="http://localhost:3000/static/返回.png" class="go_back" @click="goBack"></image>
				<image src="http://localhost:3000/static/矢量智能对象1(1).png" class="home"></image>
				<text>购物保障</text>
			</view>
			<image src="http://localhost:3000/static/a14.png" class="share"></image>
		</view>
		<view class="banner">
			<image :src="datas.title_img" mode=""></image>
		</view>
		<view class="saf_type"><text>家具类商品</text></view>
		<view class="main" v-for="(item,i) in datas.data" :key="i">
			<image :src="item.icon_img" class="main_icon"></image>
			<view class="main_title">{{item.title}}</view>
			<view class="main_img">
				<rich-text :nodes="item.text_img"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datas: {}
			};
		},
		methods: {
			async getGoodSaf() {
				const res = await uni.$http.get('/goodsSaf')
				this.datas = res.data
			},
			goBack(){
				uni.navigateBack({
					
				})
			}
		},
		onLoad() {
			this.getGoodSaf()
		}

	}
</script>

<style lang="scss">
	// 导航头
	.head {
		margin: 140rpx 0 30rpx;
		padding: 0 20rpx;
		font-size: 36rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.go_back {
			width: 25rpx;
			height: 40rpx;
			cursor: pointer;
		}

		.home {
			width: 40rpx;
			height: 40rpx;
			margin: 0 20rpx 0 60rpx;
		}

		.share {
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.banner{
		padding: 0 20rpx;
		
		image {
			width: 100%;
			height: 703rpx;
		}
	}
	.saf_type{
		width: 100%;
		font-size: 38rpx;
		text-align: center;
		color: #232e3d;
		padding-top: 24rpx;
	}
	.main{
		padding: 0 20rpx;
		position: relative;
		
		.main_icon{
			width: 106rpx;
			height: 106rpx;
			margin: 100rpx 322rpx 24rpx;
		}
		.main_title{
			color: #232e3d;
			background-color: #fff;
			padding: 0 19rpx;
			font-size: 22rpx;
			position: absolute;
			top: 220rpx;
			left: 50%;
			transform: translate(-50%);
		}
		.main_img{
			width: 100%;
			border-top: 1px solid #72797D;
			padding-top: 40rpx;
		}
	}
</style>
